<template>
  <div class="step1">
    <el-form class="step_form" :model="props.formData" ref="formRef" label-width="100px" :rules="formRule" :inline="false" label-position="left" :disabled="props.look">
      <div class="con_title">推送时间</div>
      <el-form-item label="SOP时间设置" class="mar0_form_item">
        <el-radio-group v-model="props.formData.rule_effective_time">
          <el-radio label="1" value="1">立即开始</el-radio>
          <el-radio label="2" value="2">根据有效期</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="con_title step1_two">任务汇总通知</div>
      <div class="notice_tips">每日固定时间点发送应用消息通知创建人指定成员的任务完成情况</div>
      <el-form-item label="汇总通知：">
        <div class="collect">
          <el-switch v-model="props.formData.notice_switch" :active-value="1" :inactive-value="2" />
          <p class="collect_text">
            开启后，每日固定时间点发送应用消息通知创建人指定成员的任务完成情况
            <el-popover trigger="hover" :width="'auto'" placement="top" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
              <template #reference>
                <span class="view">查看示例</span>
              </template>
              <template #default>
                <img class="viewSop" src="@/assets/image/LiveCode/viewSop.png" alt="" />
              </template>
            </el-popover>
          </p>
        </div>
      </el-form-item>
      <el-form-item label="周期设定：" v-show="props.formData.notice_switch == 1">
        <div>
          每
          <el-input-number class="dateInput" v-model="props.formData.specific_day" :min="1" :max="10" controls-position="right" @change="handleChange" />
          天
          <el-time-select placeholder="请选择时间" start="00:00" step="00:30" end="23:59" v-model="props.formData.specific_time" />
        </div>
      </el-form-item>
      <el-form-item label="通知员工：" v-show="props.formData.notice_switch == 1">
        <p>通知创建人</p>
        <el-checkbox v-model="props.formData.assign_staff" label="及指定员工" name="type" true-label="2" false-label="1" />
        <el-button class="staff_btn" type="primary" @click="openDepart" :disabled="props.formData.assign_staff == 1">选择员工</el-button>
        <div class="user_list">
          <el-tag v-for="tag in creators" :key="tag.id" class="user_item_tag" :closable="!props.look" @close="removeDepart(tag.id)">{{ tag.name }}</el-tag>
        </div>
      </el-form-item>
    </el-form>
    <!--选择成员 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  const props = defineProps(['formData', 'look'])
  import { getSetionId } from '@/utils/utils'
  const creators = ref([])
  // const notice_switch = ref()
  const look = ref(false)
  const DepartRef = ref(null)

  const sopSence = reactive([
    { id: '1', name: '客户唤醒' },
    { id: '2', name: '新客户' },
    { id: '3', name: '客户阶段转化' },
    { id: '4', name: '生日' },
    { id: '5', name: '节日' },
    { id: '6', name: '客户分局' }
  ])
  //打开使用成员弹框
  const openDepart = () => {
    DepartRef.value.appDialog.title = '选择员工'
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
    // DepartRef.value.isExternal = true //设置外部联系人
  }
  const formRule = reactive({
    assign_work_user_ids: { required: true, message: '指定员工不能为空', trigger: 'blur' }
  })
  // 获取使用成员
  const getDepart = (res: any) => {
    console.log(res, '====')
    creators.value = res
    props.formData.assign_work_user_ids = getSetionId('id', creators.value)
  }
  // 删除
  const removeDepart = (key: number) => {
    let arr = creators.value.find((item: any) => item.id == key)
    creators.value = creators.value.filter((item: any) => item.id !== key)
    DepartRef.value.removeItem(arr)
    props.formData.assign_work_user_ids = getSetionId('id', creators.value)
  }
  defineExpose({
    creators
  })
</script>

<style lang="scss" scoped>
  .step1 {
    .step1_one {
      border-bottom: 1px solid #eaeaea;
    }
    .step1_two {
      margin-top: 20px;
    }
    .con_title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #33302d;
      margin-bottom: 20px;
    }
    .step1_two {
      border-top: 1px solid #eaeaea;
      padding-top: 30px;
    }
    .notice_tips {
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #ff6b00;
      margin-bottom: 15px;
    }
    .staff_btn {
      margin-left: 10px;
    }

    .user_list {
      margin-top: 10px;
      .user_item_tag {
        margin: 5px;
      }
    }
    .collect {
      display: flex;
      align-items: center;
      &_text {
        margin-left: 8px;
        font-size: 14px;
        font-weight: 300;
        color: #969696;
        .view {
          color: #ff6b00;
        }
      }
    }
  }
  .viewSop {
    width: 256px;
    height: 146px;
  }
  :deep(.dateInput) {
    width: 96px;
  }
</style>
